<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="lz">
    <title></title>
    <script src="jQuery/jquery-3.1.1.js"></script>
    <style>
        .dh{
            width: 800px;
            height: 80px;
            background-color: lightgray;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            justify-content: space-around;
            position: absolute;
            left: 30%;
            border-radius: 10px;
        }
        main{
            width: 800px;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            justify-content: space-around;
            position: absolute;
            left: 30%;
            top: 70px;
        }
        span{
            display: inline-block;
            font-size: 1.9rem;
            color: #999;
            line-height: 80px;
        }
        span:hover{
            color: goldenrod;
        }
        .z1,.z2,.z3,.z4{
            width: 100px;
            border: 1px solid lightgray;
            /*position: absolute;
            left: 32.5%;
            top: 80px;*/
        }
        .z1>div,.z2>div,.z3>div,.z4>div{
            text-align: center;
            color: #777;
            margin: 40px 0;
            font-size: 1.5rem;
        }
        .z1>div:hover,.z2>div:hover,.z3>div:hover,.z4>div:hover{
            text-decoration: underline;
            cursor: pointer;
        }    
        .p{
            visibility: hidden;
        }    
    </style>
</head>
<body>
    <div class="dh">
        <span>大是大非</span>
        <span>阿斯顿和</span>
        <span>阿女郡的</span>
        <span>是不符合</span>
    </div>
    <main>
        <section class="z1 p">
            <div>撒大声说</div>
            <div>怪我怪我</div>
            <div>请问问问</div>
        </section>
        <section class="z2 p">
            <div>介绍的个</div>
            <div>看帅哥福</div>
            <div>分手歌女</div>
        </section>
        <section class="z3 p">
            <div>介绍的个</div>
            <div>看帅哥福</div>
            <div>分手歌女</div>
        </section>
        <section class="z4 p">
            <div>介绍的个</div>
            <div>看帅哥福</div>
            <div>分手歌女</div>
        </section>
    </main>
</body>
</html>
<script>
    $('.dh>span').each(function(index){
        $(this).mouseover(function(){
            // console.log(index)
            $('main>section').addClass('p');                        
            $('main>section').eq(index).removeClass('p');
        })
    })

    $('main>section').mouseleave(function(){
            $('main>section').addClass('p');                        
    })
</script>